<template>
    <div style="boxs">
        <ul>
            <li v-for="(data,index) in list" :key="index" @click="go(data.courseId)">
                <div class="left"><img :src="data.courseImg" alt=""><span>{{data.courseName}}</span></div>
                <div class="right"><van-icon name="arrow" /></div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    mounted() {
        (async ()=>{
            let {data} = await this.get('/course/queryCourse',{userId:localStorage.getItem('id')});
            this.list = data;
            if(!data.length){
                this.emply = true
            }
        })()
    },
    data() {
        return {
            list:[],
            emply:false
        }
    },
    methods: {
        go(id){
            this.$router.push({
                path:'/lessonlist',
                query:{
                    id
                }
                })
        }
    },
}
</script>
<style lang="scss" scoped>
    .boxs{
        width: 100%;
    }    
    ul{
        min-height: 100%;
        background-color: #F7F9FA;
        overflow: auto;
        li{
            width: 100%;
            height: 1rem;
            background: white;
            padding: 0.24rem;
            box-sizing: border-box;
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-top: 0.16rem;
            font-size: 0.3rem;
            color: #333333;
            img{
                width: 0.5rem;
                height: 0.5rem;
            }
            .left{
                display: flex;
                align-items: center;
                span{
                    margin-left: 0.13rem;
                }
            }
        }
    }
</style>